import React, { FC } from 'react'
import { Button } from 'antd'
import ExcelJs from "exceljs";
import _ from 'lodash'
const ExportExcle: FC<any> = ({
    children,
    data,
    columns,
    fileNeme
}) => {

    const mockData = [
        {
            Name: "Allen",
            Gender: "Male",
            Height: "175"
        },
        {
            Name: "Tom",
            Gender: "Male",
            Height: "180"
        },
        {
            Name: "Jane",
            Gender: "Female",
            Height: "170"
        }
    ];
    const exportToExcel = (data: any) => {
        let sheetName = fileNeme + ".xlsx";
        let headerName = "RequestsList";

        let workbook = new ExcelJs.Workbook();
        let sheet = workbook.addWorksheet(sheetName, {
            views: [{ showGridLines: false }]
        });
        let columnArr = [];
        for (let i in data[0]) {
            let tempObj = { name: "" };
            tempObj.name = i;
            console.log(i)
            columnArr.push(tempObj);
        }
        console.log(columnArr)

        sheet.addTable({
            name: `Header`,
            ref: "A1",
            headerRow: true,
            totalsRow: false,
            style: {
                theme: "",
                showRowStripes: false,
                showFirstColumn: true,
                width: 200
            },
            columns: [{ name: "WH2214-daydayup" }, { name: "YYDS" }],
            rows: [[`As of:${new Date()}`], ['zuozuomu']]
        });

        sheet.addTable({
            name: headerName,
            ref: "A5",
            headerRow: true,
            totalsRow: false,
            style: {
                theme: "TableStyleMedium2",
                showRowStripes: false,
                width: 200
            },
            columns: columnArr ? columnArr : [{ name: "" }],
            rows: data.map((e: any) => {
                let arr = [];
                for (let i in e) {
                    arr.push(e[i]);
                }
                return arr;
            })
        });

        sheet.getCell("A1").font = { size: 20, bold: true };
        sheet.columns = sheet.columns.map((e: any) => {
            const expr = e.values[5];
            switch (expr) {
                case "Name":
                    return { width: 50 };
                case "Gender":
                    return { width: 40 };
                case "Height":
                    return { width: 30 };
                default:
                    return { width: 20 };
            }
        });

        const table = sheet.getTable(headerName);
        for (let i = 0; i < table.table.columns.length; i++) {
            sheet.getCell(`${String.fromCharCode(65 + i)}5`).font = { size: 12 };
            sheet.getCell(`${String.fromCharCode(65 + i)}5`).fill = {
                type: "pattern",
                pattern: "solid",
                fgColor: { argb: "c5d9f1" }
            };

            for (let j = 0; j < table.table.rows.length; j++) {
                let rowCell = sheet.getCell(`${String.fromCharCode(65 + i)}${j + 6}`);
                rowCell.alignment = { wrapText: true };
                rowCell.border = {
                    bottom: {
                        style: "thin",
                        color: { argb: "a6a6a6" }
                    }
                };
            }
        }
        table.commit();

        const writeFile = (fileName: any, content: any) => {
            const link = document.createElement("a");
            const blob = new Blob([content], {
                type: "application/vnd.ms-excel;charset=utf-8;"
            });
            link.download = fileName;
            link.href = URL.createObjectURL(blob);
            link.click();
        };

        workbook.xlsx.writeBuffer().then((buffer) => {
            writeFile(sheetName, buffer);
        });
    };

    return (
        <div onClick={() => exportToExcel(data)}>
            {
                children ? children :
                    <Button type='primary' >
                        导出数据
                    </Button>
            }
        </div>
    )
}

ExportExcle.defaultProps = {
    fileNeme: '表格数据'
}
export default ExportExcle